<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>EMS-ADMIN</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="../static/css/common.css"/>
    <link rel="shortcut icon" type="image/x-icon" href="../static/image/logo.ico">
</head>
<body style="height: 100%;">
<div id="app" class="login-div">
    <form class="layui-form login-form">
        <h1 class="login-head">登    录</h1>
        <input v-model="state.uuid" name="uuid" style="display: none;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="text" name="username" lay-verify="required" autocomplete="off" lay-affix="clear"
                       class="layui-input login-input" placeholder="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="password" name="password" lay-verify="required" autocomplete="off" lay-affix="eye"
                       class="layui-input login-input" placeholder="请输入密码">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="display: inline-flex">
                <input type="text" name="code" lay-verify="required" autocomplete="off"
                       class="layui-input login-input" style="width: 170px;" placeholder="请输入验证码">
                <img :src="state.img" style="margin-left: 20px;cursor: pointer;" @click="getVerifyCode">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-fluid login-input" lay-submit lay-filter="login" @click="login">登     录</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../static/js/http.js"></script>
<script src="../static/js/vue3.js"></script>
<script src="../static/js/common.js"></script>
<script>
    if (window !== top){
        top.location.href = location.href;
    }
  const app = {
    setup(){
      const state = Vue.reactive({
        img: '',
        uuid: ''
      })

      Vue.onMounted(() => {
        getVerifyCode()
      })

        //  获取验证码
      const getVerifyCode = () => {
        get('/auth/code', null).then(res => {
          state.img = res.img
          state.uuid = res.uuid
        })
      }

      //    登录
      const login = () => {
        Vue.nextTick(() => {
          layui.use('form', function () {
            const form = layui.form
            form.on('submit(login)', function (data) {
              post('/auth/login', data.field).then(res => {
                if (res.success){
                  Cookies.set('token', 'Bearer ' + res.data.token)
                  sessionStorage.setItem('token', 'Bearer ' + res.data.token)
                  sessionStorage.setItem("username", res.data.userDto.nickName)
                  window.location.href = "/main.html"
                } else {
                  errorMsg(res.msg)
                  // 刷新验证码
                  getVerifyCode()
                }
              })
            })
            return false
          })
        })
      }

      return {
        state,
        getVerifyCode,
        login
      }
    }
  }
  Vue.createApp(app).mount('#app')
</script>
<style>
    .layui-inline{
        padding-left: 10px;
    }
</style>
</html>